<!-- Font Awesome CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/font-awesome.min.css'>
<!---Bootstrap CSS-->
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/datepicker.css'>
<!-- App CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-admin-belize.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-flat.css'>

<!--BootStrap JavaScript-->
<script src='/lib/bootstrap/js/bootstrap.min.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/jquery.bootstrap.wizard.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootbox.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-datepicker.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-typeahead.js' type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#sortTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
<style>
    table td, table th {
        vertical-align: middle;
        height: 50px;
        text-align: center;
        font-size: 14px;
    }
</style>
<div>
    <h2>Community Applications Description</h2>
    <div class="form-group" style="margin-top: 20px;">
        <form>
            <label class="control-label">小区名称:</label>
            <select ng-options="m.objId as m.communityName for m in communityList" ng-model="community"
                    ng-change="getCommAppsData(community, startDate, endDate)">
                <option value="">全部</option>
            </select><br/>
            <div class="col-xs-1">
                <label class="control-label">开始时间:</label>
                <input type="text" id="startDate" data-provide="datepicker"
                       class="form-control datepicker" data-date-format="yyyy-mm-dd" placeholder="yyyy-MM-dd hh:mm:ss"
                       ng-model="startDate">
            </div>
            <div class="col-xs-1">
                <label class="control-label">结束时间:</label>
                <input type="text" id="endDate" data-provide="datepicker"
                       class="form-control datepicker" data-date-format="yyyy-mm-dd" placeholder="yyyy-MM-dd hh:mm:ss"
                       ng-model="endDate">
            </div>
            <button id="submit" type="submit" class="btn btn-primary"
                    ng-click="getCommAppsData(community, startDate, endDate)">搜索
            </button>

        </form>
    </div>

    <div class="tabbable">
        <div class="tab-content">

            <div class="tab-pane active" id="">
                <div>
                    <span id="loadingText" style="color: red"></span><br/>
                    开始时间：<span id="startDateText" style="font-weight: bold"></span>&nbsp;&nbsp;到：<span id="endDateText" style='font-weight: bold'></span>
                </div>
                <table class="table table-condensed">
                    <thead>
                    <tr id="sortTab">
                        <th>
                            <a href="#" ng-click="orderByField='communityName'; reverseSort = !reverseSort">
                                Community Name
                            <span ng-show="orderByField == 'communityName'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='commAppId'; reverseSort = !reverseSort">
                                Comm Apps Id
                            <span ng-show="orderByField == 'commAppId'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th width="20%">
                            <a href="#" ng-click="orderByField='dateCreated'; reverseSort = !reverseSort">
                                Date Created
                            <span ng-show="orderByField == 'dateCreated'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='user'; reverseSort = !reverseSort">
                                UserId
                            <span ng-show="orderByField == 'user'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='nickName'; reverseSort = !reverseSort">
                                User nickName
                            <span ng-show="orderByField == 'nickName'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='phone'; reverseSort = !reverseSort">
                                User Phone
                            <span ng-show="orderByField == 'phone'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th width="15%">
                            <a href="#" ng-click="orderByField='note'; reverseSort = !reverseSort">
                                Note
                            <span ng-show="orderByField == 'note'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="ca in commAppsData|orderBy:orderByField:reverseSort">
                        <td>{{ca.communityName}}</td>
                        <td>{{ca.commAppId}}</td>
                        <td width="20%">{{ca.dateCreated}}</td>
                        <td>{{ca.user}}</td>
                        <td>{{ca.nickName}}</td>
                        <td>{{ca.phone}}</td>
                        <td>{{ca.note}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
